<template>
  <div class="container">
    <div class="card-container">
      <h4>基本信息</h4>
      <div class="top1">
        <el-card class="box">
          <div v-for="o in 1" :key="o" class="text item2 el" style="margin-top:20px;margin-left: 10px;">
            <el-statistic :value="value1" title="差评未回数">
              <template slot="suffix">
                <span @click="like = !like" class="like">
                  <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                  <i class="el-icon-star-off" v-show="!like"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
        <el-card class="box">
          <div v-for="o in 1" :key="o" class="text item2 el" style="margin-top:20px;margin-left: 10px;">
            <el-statistic :value="value2" title="超时未离开订单数">
              <template slot="suffix">
                <span @click="like = !like" class="like">
                  <i class="el-icon-star-on" style="color:yellow" v-show="!!like"></i>
                  <i class="el-icon-star-off" v-show="!like"></i>
                </span>
              </template>
            </el-statistic>
          </div>
        </el-card>
        <el-card class="box">
          <div v-for="o in 1" :key="o" class="text item2 el" style="margin-top:20px;">
            <el-statistic group-separator="," :precision="2" :value="value2" :title="title2"></el-statistic>
          </div>
        </el-card>
      </div>
    </div>
    <div class="card">
      <h4>日收入折线图</h4>
      <div class="todo-list flex">
        <div class="todo-item">
          <div id="app" style="margin-top: 10px;">
            <div id="box" style="width: 1200px; height: 330px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    name: 'DataInfo',
    data() {
      return {
        charts: "",
        opinionData: ["3", "2", "4", "4", "5"],
        like: true,
        value1: ' ',
        value2: ' ',
        value3: ' ',
        title2: "销量",
        incomes: {}
      };
    },
    methods: {
      pricBorken() {
        var myChart = echarts.init(document.getElementById('box'));
        var that = this;
        this.$http.get("/order/centifiedIncome/findDailyIncome.certified").then(resp => {
          var str = [];
          for (var i = 0; i < resp.data.data.length; i++) {
            str[i] = resp.data.data[i];
          }
          myChart.setOption({
            xAxis: {
              type: 'category',
              data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
                '17', '18', '19', '20', '21',
                '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
              ],
              axisLabel: {
                interval: 2,
              }
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: str,
              type: 'line',
              smooth: true
            }]
          });
        });
      },
      getIncome() {
        this.$http.get("/order/centifiedIncome/findCommentAndOrder.certified").then(
          resp => {
            console.log(resp.data.data.badComment)
            this.value1 = resp.data.data.badComment
            this.value2 = resp.data.data.shEndOrder
          })
      }
    },
    mounted() {
      // var myChart = echarts.init(document.getElementById('box2'));
      // myChart.setOption({
      //   xAxis: {
      //     type: 'category',
      //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     {
      //       data: [150, 230, 224, 218, 135, 147, 260],
      //       type: 'line'
      //     }
      //   ]
      // });
      this.pricBorken()
      this.getIncome()
    },
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .card {
    margin: 10px 10px 20px;
    padding: 0 20px 20px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: .4em;
  }

  .top1 {
    margin-left: 100px;
    display: flex;
    gap: 100px;
  }

  h4 {
    margin: 20px 0;
    font-size: 18px;
  }

  .counts {
    line-height: 1;
    font-size: 21px;
  }

  .el {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .card-container {
    margin: 20px 10px 20px;
    padding: 0 20px 20px;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: .4em;
  }

  .container {
    height: 650px;
    background-color: #ececec;
  }

  .text {
    font-size: 14px;
  }

  .item1 {
    padding: 18px 0;
  }

  .box {
    height: 120px;
    width: 320px;
  }

  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }

  .flex {
    display: flex !important;
  }
  .like {
      cursor: pointer;
      font-size: 25px;
      display: inline-block;
    }
</style>
